<template>
  <div>
    <div class="likeHead">
      <van-tabs
        v-show="tabsShow"
        v-if="liveAbHeader"
        v-model="active"
        @click="click"
        animated
        line-width="50"
        line-height="2"
        border
        title-active-color="#ff5777"
        title-inactive-color="#333"
      >
        <van-tab title="关注" v-if="token">
          <!-- 没有关注的主播是提示 -->
          <div class="liveNull">
            <div class="null-img">
              <img src="../assets/image/user/live.png" alt="" />
              <p>宝宝还没有关注的主播开播~</p>
            </div>
          </div>
        </van-tab>
        <van-tab
          :title="item.name"
          v-for="item in liveAbHeader"
          :key="item.id"
          :name="item.id"
        >
          <div
            v-for="(likeItem, i) in liveTabList"
            :key="i"
            @click="gotoLiveDetails(likeItem)"
          >
            <likeitem :likeItem="likeItem"></likeitem>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import likeitem from "@/components/Like_item.vue";
import { mapState } from "vuex";
export default {
  components: { likeitem },
  data() {
    return {
      active: 1,
      liveAbHeader: [], //直播分类
      liveTabList: [], //直播列表
      tabsShow: false,
    };
  },
  computed: {
    ...mapState("m_user", ["token"]),
  },
  methods: {
    // 获取直播分类数据
    async getLiveAbHeader() {
      const {
        data: {
          data: {
            tabs: { items: res },
          },
        },
      } = await this.axios.get("/live/tabHeader");
      this.tabsShow = true;
      this.liveAbHeader = res;
    },
    // 获取直播列表
    async getLiveTabList(id) {
      const {
        data: {
          data: { lives: res },
        },
      } = await this.axios.get(`/live/tabList?tabId=${id}&pageIndex=1`);

      console.log(res);
      this.liveTabList = res;
    },

    click(e) {
      console.log(e);
      this.getLiveTabList(e);
      this.liveTabList = [];
    },
    // 跳转直播间
    gotoLiveDetails(likeItem) {
      this.$router.push({
        path: "livedetails",
        query: {
          roomId: likeItem.roomId,
          actorId: likeItem.actUserId,
        },
      });
    },
  },
  created() {
    this.getLiveAbHeader();
    this.getLiveTabList(1);
  },
};
</script>

<style lang="scss" scoped>
.liveNull {
  height: 100vh;
  background-color: #efefef;
  .null-img {
    width: 100%;
    padding-top: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    img {
      width: 255px;
      height: 70px;
      object-fit: cover;
      margin: auto;
    }
    p {
      text-align: center;
      color: rgb(102, 102, 102);
      font-size: 15px;
      padding-top: 10px;
    }
  }
}
</style>